<template>
  <div class="box">
    <h3 class="header">
      <span>科室管理</span>
      <el-button type="primary" @click="add('新增科室', 1, '0')" >新增科室</el-button>
    </h3>
    <el-table :data="departmentList">
        <el-table-column prop="id" align="center" label="ID">
        </el-table-column>
        <el-table-column prop="dValue" align="center" label="一级科室名称">
        </el-table-column>
        <el-table-column align="center" label="所属二级科室">
          <template slot-scope="scope">
            <el-tag
              v-for="(tag, index) in scope.row.tags"
              :key="tag.dValue"
              closable
              @close="handleCloseSubDep(tag, index)"
              >
              {{tag.dValue}}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column label="操作" align="center" width='220'>
          <template slot-scope="scope">
            <el-button @click="handleEdit(scope.row, '编辑科室')" type="text" size="small">编辑</el-button>
            <el-button type="text" size="small" @click="addSubDep(scope.row)">新增二级科室</el-button>
            <el-button type="text" size="small" @click="handleDelete(scope.row, 'getGroup', 1, 'departmentList')">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    <add-book :title="title" :dialogVisible.sync="dialogVisible" :isEdit="isEdit" :label="label" v-on:control="control" :input="input" :params="params"></add-book>
    <div class="demonstration-box" v-show="false">
        <!-- <span class="demonstration">显示总数</span> -->
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page.sync="currentPage"
          :page-size="pageParams.size"
          layout="total, prev, pager, next"
          :total="pageParams.totalCount"
        ></el-pagination>
      </div>
  </div>
</template>

<script>
const queryString = require('querystring')
import page from 'data/page'
import addBook from '../../components/addBook'
import { departmentList, subDepartmentList } from 'data/listBody';
import dict from '@/minxs/dict'
export default {
  name: 'department',
  mixins: [page, dict],
  data() {
    return {
      title: '新增科室',
      label: '科室名字',
      input: '',
      dialogVisible: false,
      departmentList,
      subDepartmentList,
      currentPage: 1,
      closable: true
    }
  },
  components: {
    addBook
  },
  created() {
    this.getGroup(1, 'departmentList')
  },
  watch: {
    departmentList() {
      this.reflash()
    },
    subDepartmentList() {
      this.reflash()
    }
  },
  methods: {
    reflash() {
      this.departmentList.forEach((sub, index) => {
        this.departmentList[index].tags = subDepartmentList.filter(subDepart => {
          return subDepart.parentKey == sub.dKey})
      });
      // this.departmentList[0].tags = [{dValue: '神经内科'}, {dValue: '神经内科2'}, {dValue: '神经内科3'}, {dValue: '神经内科4'}]
      console.log(this.departmentList)
    },
    control(val) {
      this.dialogVisible = false
      if (val) this.getGroup(1, 'departmentList')
    },
    addSubDep(row) {
      this.title = '二级科室';
      this.dialogVisible = true;
      this.isEdit = false
      this.params = {
        groupId: 2,
        parentKey: row.dKey
      }
    },
    handleCloseSubDep(tag, index) {
      console.log(tag, index)
      this.axios.delete(`/dict/${tag.id}`).then((res) => {
            console.log(res)
            if (res.data.code == 200) {
              this.$message({
                type: 'success',
                message: '删除成功!'
              });
              this.getGroup(1, 'departmentList')
              this.getGroup(2, 'subDepartmentList')
            } else {
              this.$message({
                type: 'info',
                message: '删除失败！'
              });
            }
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '删除失败!!'
          });
        });
    }
  }
}
</script>

<style lang="less" scoped>
.box{
  padding-left: 20px;
}
.header{
  border-bottom: 1px solid #eee;
  padding-bottom: 5px;
  display: flex;
  justify-content: space-between
}
</style>
